<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li class="active">
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <div class="cart-box">
                        <h2 class="slide-tit">
                            <span>1、收货地址</span>
                        </h2>
                        <el-form :model="order" :rules="rules" ref="orderForm" label-width="120px">
                            <div class="form-box address-info">
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="收货人姓名" prop="accept_name">
                                            <el-input v-model="order.accept_name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="*收货人姓名">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="所属地区" prop="area">
                                            <v-distpicker :province="select.province" :city="select.city" :area="select.area" :placeholders="placeholders" @selected="onAreaSelected"></v-distpicker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="*请选择地区">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="详细地址" prop="address">
                                            <el-input v-model="order.address"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="*详细地址">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="手机号码" prop="mobile">
                                            <el-input v-model="order.mobile"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="*手机号码">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="14">
                                        <el-form-item label="电子邮箱">
                                            <el-input v-model="order.email"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="*电子邮箱">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="邮政编码">
                                            <el-input v-model="order.post_code"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="*邮政编码">
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-form>
                        <h2 class="slide-tit">
                            <span>2、支付方式</span>
                        </h2>
                        <ul class="item-box clearfix">
                            <!--取得一个DataTable-->
                            <li>
                                <label>
                                    <el-radio v-model="order.payment_id" label="6">在线支付</el-radio>
                                </label>
                            </li>
                        </ul>
                        <h2 class="slide-tit">
                            <span>3、配送方式</span>
                        </h2>
                        <ul class="item-box clearfix">
                            <!--取得一个DataTable-->
                            <li>
                                <el-radio-group @change="expressChange" v-model="order.express_id">
                                    <el-radio :label="1">顺丰快递(20元)</el-radio>
                                    <el-radio :label="2">圆通快递(10元)</el-radio>
                                    <el-radio :label="3">韵达快递(8元)</el-radio>
                                </el-radio-group>
                            </li>
                        </ul>
                        <h2 class="slide-tit">
                            <span>4、商品清单</span>
                        </h2>
                        <div class="line15"></div>
                        <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
                            <tbody>
                                <tr>
                                    <th colspan="2" align="left">商品信息</th>
                                    <th width="84" align="left">单价</th>
                                    <th width="84" align="center">购买数量</th>
                                    <th width="104" align="left">金额(元)</th>
                                </tr>
                                <tr v-for="item in needPayGoodsList" :key="item.id">
                                    <td width="68">
                                        <a target="_blank" href="/goods/show-89.html">
                                            <img :src="item.img_url" class="img">
                                        </a>
                                    </td>
                                    <td>
                                        <a target="_blank" href="/goods/show-89.html">{{item.title}}</a>
                                    </td>
                                    <td>
                                        <span class="red">
                                            ￥{{item.sell_price}}
                                        </span>
                                    </td>
                                    <td align="center">{{item.buycount}}</td>
                                    <td>
                                        <span class="red">
                                            ￥{{item.sell_price * item.buycount}}
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="line15"></div>
                        <h2 class="slide-tit">
                            <span>5、结算信息</span>
                        </h2>
                        <div class="buy-foot clearfix">
                            <div class="left-box">
                                <dl>
                                    <dt>订单备注(100字符以内)</dt>
                                    <dd>
                                        <textarea name="message" v-model="order.message" class="input" style="height:55px;"></textarea>
                                    </dd>
                                </dl>
                            </div>
                            <div class="right-box">
                                <p>
                                    商品
                                    <label class="price">{{totalCount}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 商品金额：￥
                                    <label id="goodsAmount" class="price">{{order.goodsAmount}}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
                                </p>
                                <p>
                                    运费：￥
                                    <label id="expressFee" class="price">{{order.expressMoment}}</label> 元
                                </p>
                                <p class="txt-box">
                                    应付总金额：￥
                                    <label id="totalAmount" class="price">{{getTotalPrice}}</label>
                                </p>
                                <p class="btn-box">
                                    <a class="btn button" href="/cart.html">返回购物车</a>
                                    <input id="btnSubmit" name="btnSubmit" type="submit" value="确认提交" @click="goToPay()" class="btn submit">
                                </p>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<style>
</style>

<script>
    //导入localStorageHelper.js
    import { getGoods } from '../../common/localStorageHelper'

    //导入省市区选择插件
    import VDistpicker from 'v-distpicker'

    export default {
        data() {
            return {
                select: { province: '广东省', city: '广州市', area: '海珠区' },
                placeholders: {
                    province: '------- 省 --------',
                    city: '--- 市 ---',
                    area: '--- 区 ---',
                },
                needPayGoodsList: [],
                totalCount: 0,
                order: {
                    accept_name: "张三",
                    area: null,
                    address: "中粮商务公园",
                    mobile: "13811111111",
                    email: "duanzihuang@itcast.cn",
                    post_code: "100001",
                    payment_id: "6",//支付方式，暂时固定 6代表在线支付
                    express_id: 1,//1.顺丰快递 2.圆通 3.韵达
                    message: "请尽快发货",
                    goodsAmount: 0,//商品总额
                    expressMoment: 20//快递费
                },
                rules: {
                    accept_name: [
                        { required: true, message: '请输入收货人姓名', trigger: 'blur' }
                    ],
                    area: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            //获取需要支付的商品信息
            this.getNeedPayGoodsListData()
        },
        computed: {
            getTotalPrice() {
                return this.order.expressMoment + this.order.goodsAmount
            }
        },
        methods: {
            //获取要结算的商品的数组
            getNeedPayGoodsListData() {
                const url = `site/validate/order/getgoodslist/${this.$route.params.goodsIds}`

                const localStorageGoodsObj = getGoods()

                this.$axios.get(url).then(response => {
                    response.data.message.forEach(item => {
                        item.buycount = localStorageGoodsObj[item.id]

                        this.totalCount += item.buycount
                        this.order.goodsAmount += item.buycount * item.sell_price
                    });
                    this.needPayGoodsList = response.data.message
                })
            },
            //切换了快递方式
            expressChange(value) {
                switch (value) {
                    case 1:
                        this.order.expressMoment = 20
                        break;

                    case 2:
                        this.order.expressMoment = 10
                        break;

                    case 3:
                        this.order.expressMoment = 8
                        break;

                    default:
                        break;
                }
            },
            onAreaSelected(data) {
                this.order.area = data
            },
            //下单、去支付
            goToPay() {
                this.$refs.orderForm.validate((valid) => {
                    if (valid) {
                        this.order.goodsids = this.$route.params.goodsIds
                        this.order.cargoodsobj = getGoods()
                        //下单
                        const url = "site/validate/order/setorder"
                        this.$axios.post(url,this.order).then(response=>{
                            if(response.data.status==1){
                                this.$message.error("下单失败")
                                return
                            }else if(response.data.status==2){
                                console.log(response.data.message)
                            }

                            this.$message.success("下单成功!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        components: {
            VDistpicker
        }
    }
</script>